<template>
	<div class="PC_login">
		<div class="login">
			<div style="display: flex;">
				<a><button @click="password" style="border: none;">密码登录</button></a>
				<a><button @click="Sms" style="border: none;">短信登录</button></a>
			</div>
			<div v-show="act==1">
				<p>
					<el-input input type="text" v-model="user.username" placeholder="账号名/手机号/邮箱" style="width:60%;" />
				</p>
				<p>
					<el-input input type="text" v-model="user.password" placeholder="密码" style="width: 60%;" />
				</p>
			</div>
			<div v-show="act==2">
				<p>
					<el-input input type="text" v-model="user.username" placeholder="请输入手机号" />
				</p>
				<p>
					<el-dropdown>
						<span class="el-dropdown-link">
							国家地区<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>大陆</el-dropdown-item>
							<el-dropdown-item>台湾</el-dropdown-item>
							<el-dropdown-item>港澳</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
					<el-input input type="text" v-model="user.password" placeholder="请输入验证码" />
				</p>
			</div>
			<el-button type="primary" @click="login()" style="width: 60%;background-color: #fd9d94;">登录</el-button>
		</div>
		</el-row>
	</div>
</template>

<script>
	import Vue from 'vue'
	export default {
		name: "login",
		components: {},
		data() {
			return {
				user: {},
				act: 1
			}
		},
		methods: {
			password() {
				this.act = 1
			},
			Sms() {
				this.act = 2
			},
			login() {
				console.log("kv=" + this.user);
				//"/login" 要获取Token
				this.$postKv("/api/login", this.user)
					.then((resp) => {
						console.log(100);
						console.log(resp.data);
						//获取token
						let token = resp.data.data.token;
						//存入localStorage
						window.localStorage.setItem("token", token);
						//拼接要带的token 带token
						this.$get("/api/user/info")
							.then((resp) => {
								this.user = resp.data.data
								console.log(100000);
								console.log(this.user);
								if (this.user.role == "adm") {
									console.log(this.user.name);
									this.$router.push("/PC/First")
								} else if (this.user.role == "usr") {
									console.log(3333);
									this.$router.push("/mobile/home")
								}
								console.log(resp);
								//存入localStorage
								this.$store.state.name = resp.data.data.name;
								this.$store.state.role = resp.data.data.role;
								this.$store.state.pic = resp.data.data.pic;
								localStorage.setItem('nickname', resp.data.data.name)
								localStorage.setItem('role', resp.data.data.role)
								localStorage.setItem('account', resp.data.data.account)
								localStorage.setItem('logined', 1)
								localStorage.setItem('img', resp.data.data.img)
								console.log(resp.data.data.role);
								console.log("用户信息");
								console.log(resp.data.data);
								console.log(resp.data.data.name);
								console.log("this.$store.state.name=" + this.$store.state.name);
							})
					});
			}
		},
		mounted() {

		}
	}
</script>

<style>
	.PC_login {
		width: 100%;
		height: 600px;
		background-color: #938060;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
	}

	.login {
		border: 1px saddlebrown solid;
		height: 45vh;
		width: 35%;
	}

	.el-dropdown-link {
		cursor: pointer;
		color: #409EFF;
	}

	.el-icon-arrow-down {
		font-size: 12px;
	}
</style>